<!DOCTYPE html>
<html  lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="layui/css/layui.css"/>
		<link rel="stylesheet" href="layui/css/admin.css"/>
		<link rel="stylesheet" href="layui/css/modules/layer/default/layer.css" />
	
	</head>
	<body class="layui-layout-body" layadmin-themealias="green">
		<div class="layui-fluid">
			<div class="layui-row layui-col-space15">
					<div class="layui-row layui-col-space15">
					
						<div class="layui-col-md12">
							<div class="layui-card">
								
								<div class="layui-card-body">
									<table id="demo" lay-filter="test"></table>
								</div>
							</div>
						
					</div>
				</div>

			</div>
		</div>
	
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
			
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		
		<script id="toolbarDemo" type="text/html">
      
       
       
    <div class="layui-inline">
             
    <button class="layui-btn layui-btn-sm" lay-event="add">添加职位</button>
          
     <div class="layui-input-inline" style="width:200px;height:38px;">
       <input type="text" name="likeDate" id="likeDate" required lay-verify="required" placeholder="请输入职位名" class="layui-input">
     </div>
     <div class="layui-inline">
       <button class="layui-btn layui-btn-sm"  data-type="reload" id="search"><i class="layui-icon">&#xe615;</i>搜索</button>
     </div>  
    </div>
   </script>
   <!-- 添加 -->
        <script id="addLayer" type="text/html">
          <form class="layui-form">
             <div class="layui-form-item">
                <label class="layui-form-label">职位名称</label>
                <div class="layui-input-inline">
                   <input class="layui-input" type="text" name="positionName" id="positionName">
                </div>
             </div>

             <div class="layui-form-item">
                <label class="layui-form-label">薪资</label>
                <div class="layui-input-inline">
                   <input class="layui-input" type="text" name="slary" id="slary">
                </div>
             </div>

             <div class="layui-form-item">
                <label class="layui-form-label">岗位要求</label>
                <div class="layui-input-inline">
                   <input class="layui-input" type="text" name="require" id="require">
                </div>
             </div>

             <div class="layui-form-item">
                <label class="layui-form-label">工作地</label>
                <div class="layui-input-inline">
                  <input class="layui-input" type="text" name="workPlace" id="workPlace">
                </div>
             </div>

             <div class="layui-form-item">
                <label class="layui-form-label">需求人数</label>
                <div class="layui-input-inline">
                   <input class="layui-input" type="text" name="reqnum" id="reqnum">
                </div>
             </div>
             <div class="layui-form-item">
                <label class="layui-form-label">发布时间</label>
                <div class="layui-input-inline">
                  <input class="layui-input" type="text" name="releaseTime" id="releaseTime">
                </div>
             </div>
          </form>
        </script>
   <!-- 查看 -->
        <script id="detailLayer" type="text/html">
          <form class="layui-form">
             <div class="layui-form-item">
                <label class="layui-form-label">职位名称</label>
                <div class="layui-input-inline">
                   <input class="layui-input" type="text" name="positionName" id="positionName">
                </div>
             </div>

             <div class="layui-form-item">
                <label class="layui-form-label">薪资</label>
                <div class="layui-input-inline">
                   <input class="layui-input" type="text" name="slary" id="slary">
                </div>
             </div>

             <div class="layui-form-item">
                <label class="layui-form-label">岗位要求</label>
                <div class="layui-input-inline">
                   <textarea class="layui-textarea"  name="require" id="require"></textarea>
                </div>
             </div>

             <div class="layui-form-item">
                <label class="layui-form-label">工作地</label>
                <div class="layui-input-inline">
                  <input class="layui-input" type="text" name="workPlace" id="workPlace">
                </div>
             </div>

             <div class="layui-form-item">
                <label class="layui-form-label">需求人数</label>
                <div class="layui-input-inline">
                   <input class="layui-input" type="text" name="reqnum" id="reqnum">
                </div>
             </div>
             <div class="layui-form-item">
                <label class="layui-form-label">发布时间</label>
                <div class="layui-input-inline">
                  <input class="layui-input" type="text" name="releaseTime" id="releaseTime">
                </div>
             </div>
          </form>
        </script>
		<script src="layui/layui.js"></script>
		
		<script th:inline="none">
		layui.use('table',function(){
			  var table=layui.table;
			  var $=layui.jquery;			  
			  //在招职位表格
			  table.render({
				 elem:'#demo',
				 url:'/getOpenPosition',
				 method:'post',
			     toolbar:'#toolbarDemo',
			     defaultToolbar:['filter','exports','print',{title:'提示',layEvent:'LAYTABLE_TIPS',icon:'layui-icon-tips'}],
			     title:'',
	
			     cols:[[
			    
			    	 {field:'id',title:'ID',width:80,fixed:'left',unresize:true,sort:true},
			    	 {field:'positionName',title:'职位名称',width:130,edit:'text'},			    
			    	 {field:'slary', title:'薪资', width:80, edit: 'text', sort: true}
			    	 ,{field:'require', title:'岗位要求'}
			    	 ,{field:'workPlace', title:'工作地',width:100}
			    	 ,{field:'reqnum', title:'需求人数', width:80, sort: true}
			    	 ,{field:'releaseTime', title:'发布时间', width:120},			    	 
			    	 {fixed: 'right', title:'操作', toolbar: '#barDemo', width:120}
			     ]],
			     page:true
			  });
			  
			  table.on('toolbar(test)',function(obj){
				  var checkStatus=table.checkStatus(obj.config.id);
				  switch(obj.event){
				  case 'add':
					  layui.use('layer',function(){
						  var layer=layui.layer;
						  var $=layui.jquery;
						  layui.use('form',function(){
							  var form =layui.form;
							  var index=layer.open({
									formType:1,
									title:'添加在招职位',
									content:$('#addLayer').html(),
									btn:['确认','取消'],
									area:['450px','450px'],
									offset:'80px',
									yes:function(){
										var positionName=$('#positionName').val();
										var slary=$('#slary').val();
										var require=$('#require').val();
										var workPlace=$('#workPlace').val();
										var reqnum=$('#reqnum').val();
										var releaseTime=$('#releaseTime').val();
										$.ajax({
											url:'/addPosition',
											method:'post',
											contentType:'application/json;charset=utf-8',
											data:JSON.stringify({positionName:positionName,slary:slary,require:require,workPlace:workPlace,reqnum:reqnum,releaseTime:releaseTime}),
											success:function(msg){
												if(msg){
													layer.msg("添加成功")
												}else{
													layer.msg("添加失败")
												}
											},
											error:function(msg){
												layer.msg("系统错误，添加失败");
											}
										});
									},
									btn2:function(index){layer.close(index);},
									success:function(){
										form.render();
										layui.use('laydate',function(){
											var laydate=layui.laydate;
											laydate.render({
												elem:'#releaseTime',
												type:'date',
												value:new Date(),
											});
										});
									}
							  });
						  });
					  });				  
				  break;
				  case 'getCheckLength':
					  var data=checkStatus.data;
					  layer.msg('选中了：'+data.length+'个');
				  break;
				  case 'isAll':
					  layer.msg(checkStatus.isAll?'全选':'未全选');
				  break;
				  case 'LAYTABLE_TIPS':
					  layer.alert('这是工具栏右侧自定义的一个图标按钮');
				  break;
				  };
			  });
			  
			  //监听行工具事件
			  table.on('tool(test)',function(obj){
				  var data=obj.data;
				  if(obj.event==='del'){
					  layer.confirm('真的删除吗',function(index){
							// obj.del();
							 layer.close(index);
								 
							  //向服务器端发送删除指令
							  $.ajax({
								  url:'/delPosition?id='+data.id,
								  method:'post',
								  async:false,
								  
								  success:function(data){
									  if(data){
									  layer.msg("删除成功");
									  obj.del();
									  } 
									//  }else{layer.msg("删除失败");}
								  },
								  error:function(data){
									  if(data){
										  layer.msg("删除失败");
									  }
								  }
							  });
						  });
				  }else if(obj.event==='detail'){
					  layui.use('layer',function(){
						  var layer=layui.layer;
							 var detailIndex=layer.open({
								  formType:1,
								  title:'查看信息',
								  btn:['确认','取消'],
								  yes:function(detailIndex,layero){
									  layer.close(detailIndex);
								  },
								  btn2:function(detailIndex,layero){
									  layer.close(detailIndex);
								  },
								  area:['450px','450px'],
								  content:$('#detailLayer').html(),
								  success:function(layero,index){ 
									  //给个控件赋值
										 $("[name='positionName']").val(data.positionName);
										 $("[name='slary']").val(data.slary);
										 $("[name='require']").val(data.require);
										 $("[name='workPlace']").val(data.workPlace);
										 $("[name='releaseTime']").val(data.releaseTime);
										 $("[name='reqnum']").val(data.reqnum);
								  }	 
								  });	
					  });
				  }
			
			  });
	
		})
		</script>
	</body>
</html>